<template>
  <div class="protocol">
    <div class="protocol_topZ">
      <div class="protocol_top">
        <div class="protocol_top1">经销商：</div>
        <div class="protocol_top2 protocol_top2_bold">上海惠岚科技股份有限公司（上海总代理）</div>
      </div>
      <div class="protocol_top">
        <div class="protocol_top1">协议模板：</div>
        <div class="protocol_top2">线下活动折扣协议</div>
      </div>
      <div class="protocol_top">
        <div class="protocol_top1">累计金额：</div>
        <div class="protocol_top2 protocol_top2_color">{{this.str_number.str_num(190)}}</div>
      </div>
    </div>

    <!-- 手风琴 -->
    <div class="accordion">

      <el-collapse accordion v-model="show_accor">
        <el-collapse-item class="accordion_yi" name="0">
          <template slot="title">
            <div class="accordion_yi_top">
              <div class="accordion_yi_top1">
                <span>NO.1</span>
                <span>PO核销材料</span>
              </div>
              <div class="accordion_yi_top2">
                <span class="el-icon-success"></span>
              </div>
            </div>
          </template>
           <div class="accordion_er">
              <!-- 头部表格 -->
              <div class="accordion_tabble">
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="id"
                    label="Line"
                    align="center"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="Description"
                    align="center"
                    label="Description"
                    show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column
                    prop="Quantity"
                    align="center"
                    label="Quantity">
                  </el-table-column>
                  <el-table-column
                    prop="Unit"
                    align="center"
                    label="Unit">
                  </el-table-column>
                  <el-table-column
                    prop="Price_uni"
                    align="center"
                    label="Price uni">
                  </el-table-column>
                  <el-table-column
                    prop="Curr"
                    align="center"
                    label="Curr">
                  </el-table-column>
                  <el-table-column
                    prop="Net_Price"
                    align="center"
                    label="Net Price">
                    <template slot-scope="scope">
                       {{str_number.formatNum(scope.row.Net_Price)}}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
           </div>
           <!-- 需要选择费用类型 -->
          <div class="buty">
            <div class="buty_top">
              <div class="buty_top1">
                <p class="buty_top1Left buty_top1Left_no">需要选择费用类型</p>
              </div>
            </div>
             <el-select v-model="feiLei_value" clearable placeholder="请选择">
                <el-option
                  v-for="item in feiLei"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </div>
          <!-- *门店协议上传 -->
          <div class="buty">
            <div class="buty_top">
              <div class="buty_top1">
                <div class="buty_top1Left">门店协议上传</div>
                <div class="buty_top1Lefticon el-icon-success"></div>
              </div>
              <div class="buty_top2">
                <div class="buty_top2Left">支持格式：PDF、doc、docx、xls、ppt</div>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small" type="primary">
                    <div class="zidingUpload">
                      <span class="el-icon-circle-plus-outline"></span>
                      <span>点击上传</span>
                    </div>
                  </el-button>
                </el-upload>
              </div>
            </div>
            <!-- 门店上传表格 -->
            <el-table
              :data="tableData1"
              border
              style="width: 100%">
              <el-table-column
                prop="fileName"
                align="center"
                label="文件名称"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="time"
                align="center"
                label="上传时间"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="renName"
                align="center"
                label="上传人"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="jiaF"
                align="center"
                label="识别甲方信息（可纠正）"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="yiF"
                align="center"
                label="识别乙方信息（可纠正）"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="money"
                align="center"
                label="合同金额 ">
                <template slot-scope="scope">
                   {{str_number.str_num(scope.row.money)}}
                </template>
              </el-table-column>
              <el-table-column
                prop="fileImg"
                align="center"
                label="公章截取 ">
                <template slot-scope>
                  <el-image class="img_suiji" :src="src+parseInt(Math.random()*100)">
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
            </el-table>

          </div>
        </el-collapse-item>

      </el-collapse>
    </div>
  </div>
</template>

<script>
  export default{
    name:'protocol',
    data(){
      return{
        src:"https://source.unsplash.com/collection/",
        // 手风琴切换
        show_accor:["0"],
        // 手风琴头部tabble
        tableData: [{
          id: '1',
          Description: '漫步者 H210P',
          Quantity: '2',
          Unit:"Pair",
          Price_uni:'5484',
          Curr:'CNY',
          Net_Price:'10970'
        }],
        // 门店上传表格
        tableData1:[{
          id:1,
          fileName:'红孩子母婴店协议20210123.PDF',
          time:"2021.06.01 12:24:14",
          renName:'baker李',
          jiaF:'上海惠岚科技股份有限公司',
          yiF:'红孩子母婴店',
          money:1000.00,
          fileImg:"http://newfeishilan.edu-pay.com.cn/html/jinpaiMedal/img/2.jpg",
        }],
        // 需要选择费用类型
        feiLei: [],
        feiLei_value: '',

        // 门店协议上传
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      }
    },
    mounted() {
      // 需要选择费用类型
      this.feiLei=this.roudeon();
    },
    methods:{

      // 门店协议上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },

     // 手风琴切换
     acco_cli(index){
       console.log(index)
       // 点击自己也可以实现收起，所以做了判断
       if(index==this.show_accor){
         this.show_accor=-1;
       }else{
          this.show_accor=index;
       }
     },
     // 随机数据
     roudeon(){
       let radom=[];
       for(let i=0;i<5;i++){
         radom.push({value:i,label:parseInt(Math.random()*100)})
       }
       return radom;
     }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .protocol{
    padding: 0 0.4rem;

     .protocol_topZ{
        .protocol_top{
          display: flex;
          align-items: center;
          font-size: 0.24rem;
          margin: 0.28rem 0;

          .protocol_top1{
            color: #999;
            min-width: 1.4rem;
          }
          .protocol_top2{
            color: #333;
            flex: 1;
          }
          .protocol_top2_bold{
            font-weight: bold;
          }
          .protocol_top2_color{
            color: #FF5E5E;
          }
        }
     }
     .accordion{

        >>> .el-collapse{
          border: 1px solid transparent!important;
        }
       .accordion_yi{
         border: 1px solid #E1E1E1;
         overflow: hidden;
         border-radius: 0.2rem;
         margin-bottom: 0.2rem;
         >>> .el-collapse-item{
           overflow: hidden;
           border-radius: 0.2rem;
         }
         >>> .el-collapse-item__wrap{
           border-bottom: none!important;
         }
         >>> .el-collapse-item__header{
           border-bottom:1px solid transparent!important;
           background-color: #FAFAFA;
         }
         >>> .el-collapse-item__arrow{
           font-size: 0.35rem;
           transform: rotate(90deg);
         }
         >>> .el-collapse-item__arrow.is-active{
           transform: rotate(270deg);
         }
         >>> .el-collapse-item__content{
           padding-bottom:0!important ;
         }

         .accordion_yi_top{
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0rem 0.3rem;
           box-sizing: border-box;
           cursor: pointer;

           .accordion_yi_top1{
             display: flex;
             align-items: center;
             font-size: 0.2rem;
             font-weight: bold;

             span:first-child{
               color: #29A7FA;
             }
             span:last-child{
               color: #333;
               margin-left: 0.2rem;
             }
           }
           .accordion_yi_top2{
              display: flex;
              align-items: center;
              font-size: 0.4rem;

              .el-icon-success{
                color: #3FCB5E;
              }
              .el-icon-warning{
                color: #FF5E5E;
              }
           }
         }
         .accordion_er{
           padding: 0.5rem 0.2rem;
           box-sizing: border-box;

           >>>.el-form-item__content {
             width: 100% !important;
           }
           >>>.el-select {
             width: 30%;
           }
           >>> .el-input__suffix-inner i{
             color: #29A7FA;
             font-size: 0.3rem;
           }

           .accordion_tabble{

           }
         }
         .buty{
            padding: 0 0.2rem 0.3rem 0.2rem;

            .buty_top{
              margin-bottom: 0.2rem;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .buty_top1{
                display: flex;
                align-items: center;

                .buty_top1Left{
                  font-size: 0.14rem;
                  color: #333;
                  font-weight: bold;
                }
                .buty_top1Left::before{
                  content: "*";
                  color: #FF5E5E;
                  font-size: 0.14rem;
                  margin-right: 0.05rem;
                }
                .buty_top1Left_no::before{
                  content: "";
                }
                .buty_top1Lefticon{
                  font-size: 0.26rem;
                  margin-left: 0.1rem;
                  color: #3FCB5E;
                }
              }
              .buty_top2{
                display: flex;
                align-items: center;

                .buty_top2Left{
                  color: #999;
                  font-size: 0.12rem;
                  margin-right: 0.2rem;
                }
                .zidingUpload{
                  display: flex;
                  align-items: center;
                  color: #fff;

                  span:first-child{
                    font-size: 0.28rem;
                    margin-right: 0.04rem;
                  }
                  span:last-child{
                    font-size: 0.14rem;
                  }
                }
              }
            }
            .img_suiji{
              width: 60%;
              height: 60px;
              margin: auto;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              border-radius: 5px;

              img{
                widows: 100%;
                height: 100%;
              }
            }

            /* 下拉列表框的宽度 */
            >>> .el-select{
              width: 30%;
            }
            >>> .el-select .el-input .el-select__caret{
              color: #29A7FA!important;
              font-size: 0.35rem;
            }
            // 隐藏上传后的东西
            >>> .el-upload-list{
              display: none;
            }
            >>> .el-button--mini, .el-button--small{
              border-radius: 0.1rem!important;
            }
         }
       }
     }

    // table自定义样式
     >>>.el-table th{
       background-color: #E6F4FB;
     }
     >>> .is-leaf .cell{
       color: #6FB0DB;
       font-size: 0.22rem;
       font-weight: normal!important;
     }
     >>> .el-table__row .cell{
       color: #333;
       font-size: 0.22rem;
     }
  }
</style>
